<template>
	<view class="page-container">
		<!-- 标题栏 -->
		<!-- <view class="header">第十二届全国青少年游泳锦标赛</view> -->
		<!-- 日期时间 -->
		<!-- 	<view class="date-time">
			<text class="date-text">{{ year }}年{{ month }}月{{ day }}日 {{ week }}</text>
			<text class="time-text">{{ hour }}:{{ minute }}:{{ second }}</text>
		</view> -->
		<!-- 赛事信息 -->
		<u-gap height="20rpx" bgColor="#f8f9fa"></u-gap>
		<view class="competition-info">
			<view class="info-item">
				<u-icon name="integral-fill" size="16" color="#999" />
				<text style="margin-left: 10rpx;">男子100米自由泳/ 第3组第2场</text>
			</view>
			<view class="info-item">
				<u-icon name="clock" size="16" color="#999" />
				<text style="margin-left: 10rpx;">2024-03-15 14:30</text>
				<text class="status-tag status-col">检录完毕</text>
				<text class="status-tag status-col">已结束</text>
			</view>
			<view class="info-item">
				<u-icon name="map" size="16" color="#999" />
				<text style="margin-left: 10rpx;">奥体中心游泳馆</text>
			</view>
		</view>
		<!-- 选手列表 -->
		<view class="player-list">
			<!-- 前三名 -->
			<view class="top-three">
				<view class="top-player">
					<view class="player-card" style="width: 180rpx;height: 280rpx;">
						<view class="player-avatar">
							<image :src="topThreePlayers[1].image"
								style="width: 120rpx; height: 120rpx; border-radius: 50%;" />
							<text class="rank-badge"
								:style="{ backgroundColor: topThreePlayers[1].badgeColor }">{{ topThreePlayers[1].rank }}</text>
						</view>
						<view class="player-info">
							<text class="player-name">{{ topThreePlayers[1].name }}</text>
							<text class="player-time">{{ topThreePlayers[1].time }}</text>
							<text class="player-team">{{ topThreePlayers[1].team }}</text>
						</view>
					</view>
				</view>
				<view class="top-player">
					<view class="player-card" style="width: 200rpx;height: 300rpx;">
						<view class="player-avatar">
							<image :src="topThreePlayers[0].image"
								style="width: 120rpx; height: 120rpx; border-radius: 50%;" />
							<text class="rank-badge"
								:style="{ backgroundColor: topThreePlayers[0].badgeColor }">{{ topThreePlayers[0].rank }}</text>
						</view>
						<view class="player-info">
							<text class="player-name">{{ topThreePlayers[0].name }}</text>
							<text class="player-time">{{ topThreePlayers[0].time }}</text>
							<text class="player-team">{{ topThreePlayers[0].team }}</text>
						</view>
					</view>
				</view>
				<view class="top-player">
					<view class="player-card"  style="width: 180rpx;height: 280rpx;">
						<view class="player-avatar">
							<image :src="topThreePlayers[2].image"
								style="width: 120rpx; height: 120rpx; border-radius: 50%;" />
							<text class="rank-badge"
								:style="{ backgroundColor: topThreePlayers[2].badgeColor }">{{ topThreePlayers[2].rank }}</text>
						</view>
						<view class="player-info">
							<text class="player-name">{{ topThreePlayers[2].name }}</text>
							<text class="player-time">{{ topThreePlayers[2].time }}</text>
							<text class="player-team">{{ topThreePlayers[2].team }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 其他选手 -->
			<view v-for="(player, index) in otherPlayers" :key="index" class="other-player">
				<view class="player-card">
					<view class="player-at">
						<view class="rank-text">{{ player.rank }}</view>
						<view class="player-avatar">
							<image :src="player.image" style="width: 80rpx; height: 80rpx; border-radius: 50%;margin-left: 20rpx;" />
						</view>
						<view class="playerinfo">
							<text class="player-name">{{ player.name }}</text>
							<text class="player-time">{{ player.team }}</text>
						</view>
					</view>
					<view class="player-info">
						<text class="player-time">{{ player.time }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<!-- <u-button class="confirm-btn" @click="confirmScore">成绩发布</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '2025',
				month: '03',
				day: '28',
				week: '周五',
				hour: '21',
				minute: '14',
				second: '24',
				topThreePlayers: [{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '王浩然',
						time: '00:41.25',
						team: '山东省游泳队',
						rank: '1',
						badgeColor: '#ffd700' // 金色
					},
					{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '陈俊杰',
						time: '00:40.68',
						team: '广东省游泳队',
						rank: '2',
						badgeColor: '#c0c0c0' // 银色
					},
					{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '张雨晨',
						time: '00:41.89',
						team: '江苏省游泳队',
						rank: '3',
						badgeColor: '#cd7f32' // 铜色
					}
				],
				otherPlayers: [{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '郑子豪',
						time: '00:43.73',
						team: '上海市游泳队',
						rank: '4'
					},
					{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '刘志豪',
						time: '00:44.73',
						team: '浙江省游泳队',
						rank: '5'
					},
					{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '李明阳',
						time: '00:44.79',
						team: '北京市游泳队',
						rank: '6'
					},
					{
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '董天成',
						time: '00:48.49',
						team: '四川省游泳队',
						rank: '7'
					}
				]
			};
		},
		methods: {
			confirmScore() {
				console.log('成绩发布');
			}
		}
	};
</script>

<style lang="scss" scoped>
	/* 全局容器 */
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
		padding: 10rpx;
	}

	/* 标题栏 */
	.header {
		background-color: #007AFF;
		color: white;
		text-align: center;
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 日期时间 */
	.date-time {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 20rpx;
	}

	.date-text,
	.time-text {
		font-size: 24rpx;
		color: #333;
	}

	.competition-info {
		margin-bottom: 20rpx;
		width: 100%;
		padding: 10rpx;
		background-color: #fff;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.info-item u-icon {
		margin-right: 12rpx;
		color: #999;
	}

	.info-item text {
		font-size: 24rpx;
		color: #666;
	}

	.status-tag {
		margin-left: 10rpx;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.status-col {
		color: #4CAF50 !important;
	}

	.status-orl {
		color: #ffd590 !important;
	}

	/* 选手列表 */
	.player-list {
		flex: 1;
		overflow-y: auto;
		margin-bottom: 100rpx;
	}

	.top-three {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.top-player {
		text-align: center;
	}

	.player-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin: 0 10rpx;
		width: 100%;

	}

	.player-avatar {
		position: relative;
		margin-bottom: 10rpx;
	}

	.rank-badge {
		position: absolute;
		top: 0;
		right: 0;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	.player-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.playerinfo {
		display: flex;
		flex-direction: column;
	}

	.player-name {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.player-time {
		font-size: 24rpx;
		color: #007AFF;
		margin-bottom: 4rpx;
	}

	.player-team {
		font-size: 22rpx;
		color: #666;
	}

	/* 其他选手 */
	.other-player {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
	}

	.other-player .player-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 15rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.player-at{
		display: flex;
		align-items: center;
	}

	.other-player .player-avatar {
		margin-right: 20rpx;
	}

	.rank-text {
		font-size: 24rpx;
		color: #666;
		min-width: 30rpx;
		text-align: center;
	}

	/* 按钮 */
	.confirm-btn {
		background-color: #4CAF50;
		color: white;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin: 0 20rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 
</style>